import React from 'react';
import { Tag } from '@teamix/ui';
import { YunxiaoIcon } from '@alife/devops-ui';
import Content from 'components/dependencyIssueDetailDialog/content';
import Description from 'components/dependencyIssueDetailDialog/description';
import intl from '../../locale';

const prefix = 'dependency-build-issue-list-item';
const levelMap = {
  Blocker: 'red',
  Major: 'blue',
  Critical: 'orange',
};

export default class DetailItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDetailVisible: props.index === 0,
    };
  }

  render() {
    const { item = {} } = this.props;
    const { isDetailVisible } = this.state;

    return (
      <div className={`${prefix}-detail`}>
        <div
          className={`${prefix}-detail-level ${item.level.toLowerCase()}`}
          onClick={() => {
            this.setState({ isDetailVisible: !isDetailVisible });
          }}
        >
          <div className={`${prefix}-detail-level-left`}>
            <Tag
              style={{ marginRight: 18, background: levelMap[item.level] || 'gray', color: '#fff' }}
            >
              {item.level}
            </Tag>
            <span>{item.title}</span>
          </div>
          <div className={`${prefix}-detail-level-right`}>
            <YunxiaoIcon
              type={`arrow-${isDetailVisible ? 'up' : 'right'}-2-line`}
              className={`${prefix}-detail-level-right-icon`}
            />
          </div>
        </div>
        <div
          className={`${prefix}-detail-items`}
          style={{ display: isDetailVisible ? 'block' : 'none' }}
        >
          <div className={`${prefix}-detail-item`}>
            <div className={`${prefix}-detail-item-left`}>
              {intl.get({
                id: 'code-assets.components.dependencyBuildResultIssues.detailItem.Number',
                defaultMessage: '编号',
              })}
            </div>
            <div className={`${prefix}-detail-item-right`}>
              <a href={item.cve_url} target="_blank" rel="noreferrer">
                {item.cve_id}
              </a>
            </div>
          </div>
          <div className={`${prefix}-detail-item`}>
            <div className={`${prefix}-detail-item-left`}>
              {intl.get({
                id: 'code-assets.components.dependencyBuildResultIssues.detailItem.Description',
                defaultMessage: '描述',
              })}
            </div>
            <div className={`${prefix}-detail-item-right`}>
              <Description description={item.description} />
            </div>
          </div>
          <div className={`${prefix}-detail-item`}>
            <div className={`${prefix}-detail-item-left`}>
              {intl.get({
                id: 'code-assets.components.dependencyBuildResultIssues.detailItem.ImpactRange',
                defaultMessage: '影响范围',
              })}
            </div>
            <div className={`${prefix}-detail-item-right`}>
              <Content content={item.content} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}
